<template>
  <page-header-wrapper :title="false">
    <a-card title="其他客户领取统计">
      <a-tabs type="card">
        <a-tab-pane key="1" tab="总数统计">
          <div class="table-page-search-wrapper">
            <a-form-model :model="queryParam" layout="inline">
              <a-row :gutter="20">
                <a-col v-if="groupType == 'big_leader'" :md="6" :sm="24">
                  <a-form-model-item label="所属组长">
                    <a-select
                      mode="multiple"
                      :filter-option="filterOption"
                      v-model="queryParam.leader_uid"
                      placeholder="请选择所属组长"
                    >
                      <a-select-option v-for="(item,index) in leaderOpts" :key="index" :value="index">{{item}}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="顾问姓名">
                    <a-select
                      v-model="queryParam['filter[adviser_uid]']"
                      placeholder="请选择顾问姓名"
                    >
                      <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <template v-if="advanced">
                  <a-col :md="6" :sm="24">
                    <a-form-model-item label="月份筛选">
                      <a-select
                        v-model="queryParam['filter[type]']"
                        placeholder="请选择月份筛选"
                      >
                        <a-select-option value="today">本日</a-select-option>
                        <a-select-option value="month">本月</a-select-option>
                        <a-select-option value="last_month">上月</a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :md="6" :sm="24">
                    <a-form-model-item label="日期筛选">
                      <a-range-picker @change="onChange" />
                    </a-form-model-item>
                  </a-col>
                </template>
                <a-col :md="6" :sm="24">
                      <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                        <a-button type="primary" @click="$refs.table.refresh()">查询</a-button>
                        <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
                        <a @click="toggleAdvanced" style="margin-left: 8px">
                          {{ advanced ? '收起' : '展开' }}
                          <a-icon :type="advanced ? 'up' : 'down'"/>
                        </a>
                      </span>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
          <div class="table-operator">
            <s-table
              bordered
              ref="table"
              size="middle"
              :row-key="(record) => record.id"
              :columns="stateColumns"
              :data="stateData"
            >
              <div
                slot="filterDropdown"
                slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                style="padding: 8px"
              >
                <a-input
                  v-ant-ref="c => (searchInput = c)"
                  :placeholder="`搜索${column.title}`"
                  :value="selectedKeys[0]"
                  style="width: 188px; margin-bottom: 8px; display: block;"
                  @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                  @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
                />
                <a-button
                  type="primary"
                  icon="search"
                  size="small"
                  style="width: 90px; margin-right: 8px"
                  @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
                >
                  搜索
                </a-button>
                <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
                  重置
                </a-button>
              </div>
              <div slot="footer">
                <a-row type="flex">
                  <a-col flex="11.11%" style="padding: 12px 9px">
                    <p style="margin: 0;">汇总</p>
                  </a-col>
                  <a-col flex="11.1111%" style="padding: 12px 8px"></a-col>
                  <a-col flex="11.1111%" style="padding: 12px 8px"><a-tag color="red">{{totalCount.kjCount}}</a-tag></a-col>
                  <a-col flex="11.1111%" style="padding: 12px 8px"><a-tag color="red">{{totalCount.bhCount}}</a-tag></a-col>
                  <a-col flex="11.1111%" style="padding: 12px 8px"><a-tag color="red">{{totalCount.sdCount}}</a-tag></a-col>
                  <a-col flex="11.1111%" style="padding: 12px 8px"><a-tag color="red">{{totalCount.sjCount}}</a-tag></a-col>
                  <a-col flex="11.1111%" style="padding: 12px 8px"><a-tag color="red">{{totalCount.zlCount}}</a-tag></a-col>
                  <a-col flex="11.1111%" style="padding: 12px 8px"><a-tag color="red">{{totalCount.xzCount}}</a-tag></a-col>
                  <a-col flex="11.1111%" style="padding: 12px 8px"><a-tag color="red">{{totalCount.bgCount}}</a-tag></a-col>
                </a-row>
              </div>
              <template slot="accounting" slot-scope="text">
                <a-tag >{{ text }}</a-tag>
              </template>
              <template slot="reject" slot-scope="text">
                <a-tag>{{ text }}</a-tag>
              </template>
              <template slot="notice" slot-scope="text">
                <a-tag>{{ text }}</a-tag>
              </template>
              <template slot="iso" slot-scope="text">
                <a-tag>{{ text }}</a-tag>
              </template>
              <template slot="ptyp" slot-scope="text">
                <a-tag>{{ text }}</a-tag>
              </template>
              <template slot="tme" slot-scope="text">
                <a-tag>{{ text }}</a-tag>
              </template>
              <template slot="tmc" slot-scope="text">
                <a-tag>{{ text }}</a-tag>
              </template>
              <template slot="wechat" slot-scope="text, record">
                <a-button icon="eye" type="link" @click="onLook(record.id)">{{text}}</a-button>
              </template>
            </s-table>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="循环统计">
          <div class="table-operator">
            <s-table
              bordered
              ref="table3"
              size="middle"
              :row-key="(record,index) => index"
              :columns="forColumns"
              :data="forData"
            >
              <template slot="first_type" slot-scope="text">
                <a-tag color="red">{{typeOpts[text]}}</a-tag>
              </template>
              <template slot="action" slot-scope="text,record">
                <a-button size="small" type="danger" @click="onDel(record.first_type)">全部删除</a-button>
              </template>
            </s-table>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-modal
      title="微信列表"
      v-model="visible"
      :footer="null"
    >
      <a-table
        bordered
        size="small"
        :row-key="(record) => record.id"
        :columns="wechatColumns"
        :data-source="wechatData"
      >
        <template slot="tm_name" slot-scope="text, record">
          {{text}}{{record.pt_name}}
        </template>
        <template slot="phone" slot-scope="text, record">
          {{text}}<span v-if="record.phone2">/{{record.phone2}}</span>
        </template>
      </a-table>
    </a-modal>
    <a-modal>
      <a-table></a-table>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import storage from 'store'
  import { STable } from '@/components'
  import customerColumns from '@/columns/customer'
  import { delAllOther, getLoopState, getTotalState } from '@/api/customer'

  export default {
    components: {
      STable
    },
    name: 'OtherState',
    data () {
      return {
        searchInput: null,
        searchText: '',
        advanced: true,
        queryParam: {},
        visible: false,
        adviserOpts: {},
        leaderOpts: {},
        totalCount: {},
        typeOpts: {},
        stateColumns: customerColumns.state,
        stateData: parameters => {
          return getTotalState(Object.assign(parameters, this.queryParam)).then(res => {
            this.adviserOpts = res.result.user_opts
            this.totalCount = res.result.dataCount
            return res.result
          })
        },
        wechatColumns: customerColumns.wechat,
        // wechatData: parameters => {
        //   return getPreWechat(parameters).then(res => {
        //     return res.result
        //   })
        // },
        wechatData: [],
        forColumns: customerColumns.for_state,
        forData: parameters => {
          return getLoopState(Object.assign(parameters, this.queryParam1)).then(res => {
            this.typeOpts = res.result.typeOpts
            return res.result
          })
        },
        groupType: storage.get('GROUP')
      }
    },
    created () {
      this.queryParam['page_size'] = 20
    },
    methods: {
      handleSearch (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
      },
      handleReset (clearFilters, dataIndex) {
        clearFilters()
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      onChange (date, dateString) {
        this.queryParam['filter[begin_received_at]'] = dateString[0]
        this.queryParam['filter[end_received_at]'] = dateString[1]
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      onDel (type) {
        this.$confirm({
          title: '删除当前类型已领取/未领取的全部大客户资源',
          onOk: () => {
            delAllOther(type).then(res => {
              this.$refs.table3.refresh(true)
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  /deep/ .ant-table-footer{padding: 0!important;}
</style>
